<example name="Shortcuts Ng Hint Popup">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <button ng-click="ctrl.showPopup()">Show popup</button>
      <rg-dialog></rg-dialog>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import ShortcutsHintNg from '@jetbrains/ring-ui/components/shortcuts-hint-ng/shortcuts-hint-ng';

    angular.module('test', [ShortcutsHintNg])
    .config(function(shortcutsProvider) {
      shortcutsProvider
        .mode({id: 'some-kind-shortcuts',
          title: 'Some Action Related Shortcuts',
          shortcuts: [
            {
              key: 'meta+enter+home',
              action: 'someAction',
              title: 'Do some action shortcut'
            }, {
              key: 'ctrl+shift+down',
              action: 'someAction',
              title: 'Another action shortcut with very very very very very very very very very very long text description'
            }, {
              key: ['ctrl+alt+e', 'shift+down+u'],
              action: 'someAction',
              title: 'Another action shortcut with multiple keys'
            }, {
              key: ['meta+right+left+end'],
              action: 'fooBarAction',
              title: 'Blah blah blah Blah blah blah Blah blah blah Blah blah blahBlah blah blahBlah blah blah'
            }, {
              key: ['meta+esc+del+end'],
              action: 'someAction',
              title: 'Blah blah'
            }, {
              key: ['ctrl+alt+e', 'shift+e+enter'],
              action: 'someAction',
              title: 'Fo bar cooo'
            }, {
              key: ['shift+down+u'],
              action: 'someAction',
              title: 'Another action shortcut with multiple keys'
            }, {
              key: ['ctrl+alt+e'],
              action: 'someAction',
              title: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
            }, {
              key: ['shift+down+u+]'],
              action: 'someAction',
              title: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'
            }, {
              key: ['ctrl+alt+right+up+down'],
              action: 'someAction',
              title: 'Lorem Ipsum is simply'
            }
          ]
        })
        .mode({
          id: 'some-other-shortcuts',
          title: 'Shortcuts for other actions',
          shortcuts: [
            {
              key: 'meta+=',
              action: 'someAction',
              title: 'Do some action shortcut'
            }, {
              key: 'alt+N',
              action: 'someAction',
              title: 'Another action shortcut with very very long text description'
            }, {
              key: 'shift+left+down',
              action: 'someAction',
              title: 'Another action shortcut'
            }
          ]
        })
    })
    .controller('testCtrl', function($timeout, rgShortcutsHintPopup) {
      var ctrl = this;

      ctrl.showPopup = function() {
        rgShortcutsHintPopup.show({
            tailTemplate: `
              <div>
                You can write anything here, this is a custom section.
                You can even create your own footer.
              </div>
            `
          });
      }

      $timeout(ctrl.showPopup, 200);
    });
  </file>
</example>
